<template>
  <div>
    <Loading :loading="loading" />
    <el-table :data="tableData">
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="age" label="Age" />
      <el-table-column prop="address" label="Address" />
    </el-table>
    <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
    />
  </div>
</template>

<script>
import Loading from './Loading.vue';
import request from '../utils/request';

export default {
  name: 'TablePage',
  components: {
    Loading
  },
  data() {
    return {
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      loading: false,
    };
  },
  computed: {
    loading() {
      return this.$store.state.loading;
    }
  },
  methods: {
    fetchData() {
      request.get('/data', {
        params: {
          page: this.currentPage,
          pageSize: this.pageSize,
        }
      }).then(response => {
        this.tableData = response.data.data;
        this.total = response.data.total;
      });
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchData();
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

<style scoped>
/* 样式代码 */
</style>